@import '../../../common';

$defcon_color: #000000;
$critical_color: darkred;
$high_color: $cds_color_red;
$medium_color: orange;
$low_color: $cds_color_green;
$negligible_color: grey;
$unknown_color: lightgrey;

.Vulnerability {

  .summary-labels {
    display: flex;
    max-width: 1000px;
    margin: 5px auto;

    .label {
      text-align: center;
      flex: 1;
    }
    .label.defcon1 {
      color: $defcon_color;
    }
    .label.critical {
      color: $critical_color;
    }
    .label.high {
      color: $high_color;
    }
    .label.medium {
      color: $medium_color;
    }
    .label.low {
      color: $low_color;
    }
    .label.negligible {
      color: $negligible_color;
    }
    .label.unknown {
      color: $unknown_color;
    }
  }

  .summary-bar {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    height: 10px;

    .bar {
      text-align: center;
      flex: 1;
    }
    .bar:last-child {
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;
    }
    .bar:first-child {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    .bar.defcon1 {
      background-color: $defcon_color;
    }
    .bar.critical {
      background-color: $critical_color;
    }
    .bar.high {
      background-color: $high_color;
    }
    .bar.medium {
      background-color: $medium_color;
    }
    .bar.low {
      background-color: $low_color;
    }
    .bar.negligible {
      background-color: $negligible_color;
    }
    .bar.unknown {
      background-color: $unknown_color;
    }
  }

  .dot-container {
    max-width: 1000px;
    margin: 20px auto 0 auto;

    .vuln {
      width: 20px;
      height: 20px;
      border-radius: 13px;
      position: relative;
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .vuln.defcon1 {
      background-color: $defcon_color;
    }
    .vuln.critical {
      background-color: $critical_color;
    }
    .vuln.high {
      background-color: $high_color;
    }
    .vuln.medium {
      background-color: $medium_color;
    }
    .vuln.low {
      background-color: $low_color;
    }
    .vuln.negligible {
      background-color: $negligible_color;
    }
    .vuln.unknown {
      background-color: $unknown_color;
    }
  }

  .list {
    max-width: 1000px;
    margin: 20px auto 0 auto;
  }
}